<template>
  <view class="member-list" v-cloak>
    <view class="list-item" :class="idx == 0?'active':''" v-for="(item,idx) in list" :key="idx">
      <image src="@/static/member-bg.png" mode="aspectFill" class="item-bg"></image>
      <!-- <image src="@/static/gray.jpg" mode="aspectFill" class="item-img"></image> -->
      <view class="item-info">
        <view class="h2">{{item.familyName}}</view>
        <view class="info-p">诊疗卡号：{{item.familyUserId}}</view>
      </view>
      <view class="item-icon" v-if="item.familyRoleCode">{{item.familyRoleCode}}</view>
    </view>
    <view class="list-footer">
      <view class="button" @click="handleToUrl('/doctorPackage/member-add')"> <uni-icons size="14" color="#fff" style="margin-right: 8rpx;" type="plusempty"></uni-icons> 添加诊疗人</view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[]
      };
    },
    onLoad() {
      this._initData()
    },
    methods:{
      handleToUrl(url){
        uni.navigateTo({
          url
        })
      },
      
      ///  network
      _initData(){
        uni.showLoading({
          title:'加载中...'
        })
        this.$get('/yahe/userFamily/getUserFamilyList','','1').then(res=>{
          if(res.code == '1'){
            this.list = [...this.list,...res.content]
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.member-list{
  padding: 24rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--page-bg);
  .list-item{
    margin-bottom: 24rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    position: relative;
    padding: 40rpx 24rpx;
    background: #fff;
    .item-bg{
      position: absolute;
      bottom: 0;
      right: 84rpx;
      width: 168rpx;
      height: 139rpx;
    }
    &.active{
      background: linear-gradient( 179deg, #29D8C6 0%, #F0FDFA 100%);
    }
    .item-img{
      width: 88rpx;
      height: 88rpx;
      border-radius: 50%;
      border: 8rpx solid rgba(255,255,255,0.3);
      box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(213,213,213,0.3);
    }
    .item-info{
      flex: 1;
      margin-left: 24rpx;
      position: relative;
      z-index: 10;
      .h2{
        font-size: 32rpx;
        color: var(--title-color);
        margin-bottom: 20rpx;
      }
      .info-p{
        font-size: 22rpx;
        color: var(--sub-title);
      }
    }
    .item-icon{
      position: absolute;
      right: 0;
      top: 0;
      line-height: 1;
      padding: 8rpx 26rpx;
      border-radius: 0 20rpx;
      background: var(--theme-color);
      color: #fff;
      font-size: 22rpx;
    }
  }
  .list-footer{
    margin-top: 120rpx;
    padding: 0 84rpx;
    .button{
      color: #fff;
      font-size: 28rpx;
      line-height: 80rpx;
      border-radius: 80rpx;
      text-align: center;
      background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
    }
  }
}
</style>
